<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jsx语法</title>
</head>
<body>
    <div id="container"></div>
    <!-- 加载 React。-->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <script src="../js-react/react@16.development.js" crossorigin></script>
    <script src="../js-react/react-dom@16.development.js" crossorigin></script>
    <!-- babel.min.js用于解析将jsx语法转为js语法 -->
    <script src="../js-react/babel@6.min.js"></script>

    <!-- 加载我们的 React 组件。babel指定使用jsx语法-->
    <script type="text/babel">
        const myId = 'demoId'
        const myData = 'HelLo, ReAct'
        const color = 'red'

        // 1. 创建虚拟DOM, <good>标签能显示123，但会有警告
        const VDOM = (
            <div>
                <h1 className="title" id={myId.toLowerCase()}>
                    <span style={{color:color, backgroundColor:'yellow'}}>{myData.toUpperCase()}</span>
                </h1>
                <input type="text"/><br/>
                <good>1233</good>
            </div>
        )
        // 报错，Good is not defined
        // const VDOM = (
        //     <div>
        //         <h1 className="title" id={myId.toLowerCase()}>
        //             <span style={{color:color, backgroundColor:'yellow'}}>{myData.toUpperCase()}</span>
        //         </h1>
        //         <input type="text"/>
        //         <Good>123</Good>
        //     </div>
        // )

        // 2. 渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('container'))

        /*
            jsx语法规则:
                1. 定义虚拟DOM时，不要写引号
                2. 标签中混入JS"表达式"(而不是语句/代码)时要用 {} 括起来
                    2.1 表达式：一个表达式会产生一个值，可以用一个变量接收，下面这些都是表达式：
                        (1) a
                        (2) a+b
                        (3) func(1) ==> 函数调用，即使函数没返回值，也能接收到一个undefined
                        (4) arr.map() ==> 函数调用
                        (5) function test() {}  ==> 函数定义
                    2.2 语句/代码：
                        (1) if(){}
                        (2) for(){}
                        (3) switch(){case:xxx}
                3. 样式多类名要用className，不能用class了
                4. 内联样式，要用js对象去写，例如：style={{key:value}}
                5. 一个虚拟DOM只能有一个根标签 ==> <div>
                6. 标签必须闭合 ==> <input />
                7. 标签首字母：
                    7.1 若小写字母开头，则将该标签转化为html中同名标签，若html中无同名标签，则报错/警告 ==> <good>
                    7.2 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错 ==> <Good>
        */
    </script>
</body>
</html>